<template>
  <div  class="likes"  style="">
    <!-- 猜你喜欢 -->
    <!-- 标题 -->
    <div

      style="display: flex; align-items: center; "
    >
      <h2>猜你喜欢</h2>
      <div  style="margin-left: auto">
        <span>换一换</span>
        <i class="el-icon-refresh"></i>
      </div>
    </div>

    <!-- 内容 -->
    <div style="border: 1px solid #ccc;padding-bottom: 5px;">
      <div
        v-for="(item, index) in likes"
        :key="index"
        style="white-space: nowrap; display: inline-block;padding-left: 3px;"
      >
        <div>
          <img  :src="item.url" alt="" />

          <div v-if="index===likes.length-1" style=" width: 140px;
              font-size: 12px;
              border-right: none;
              white-space: normal;
              word-wrap: break-word;
              word-break: normal;
              margin-left: 37px;">
  <span>{{ item.name }}</span>

<div style="padding-top: 10px">
  <span style="color: red; font-size: 20px; font-weight: bold"
    >￥116.00</span
  >
</div>
          </div>

          <div v-else
            style="
              width: 140px;
              font-size: 12px;
              border-right: 1px solid #ccc;
              white-space: normal;
              word-wrap: break-word;
              word-break: normal;
              padding-left: 37px;
            "
            >

            <span>{{ item.name }}</span>

            <div style="padding-top: 10px">
              <span style="color: red; font-size: 20px; font-weight: bold"
                >￥116.00</span
              >
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

      // 右侧logo
      likes: [
        { url: require('@/static/home/like_01.png'), name: '阳光美包新款单肩包女包时尚子母包四件套女' },
        { url: require('@/static/home/like_02.png'), name: '爱答士30CM炒锅不粘锅NWG8330E电磁炉炒锅' },
        { url: require('@/static/home/like_03.png'), name: '捷波朗(jabra)BOOSI劲步' },
        { url: require('@/static/home/like_01.png'), name: '阳光美包新款单肩包女包时尚子母包四件套女' },
        { url: require('@/static/home/like_02.png'), name: '爱答士30CM炒锅不粘锅NWG8330E电磁炉炒锅' },
        { url: require('@/static/home/like_03.png'), name: '捷波朗(jabra)BOOSI劲步' }

      ]

    }
  }
}
</script>

<style lang="less" scoped>
.likes{
  width: 1100px;
 /* display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 50px;
  padding-top: 20px;  */
}
</style>
